<template>
    <div>
        <div ref="trend" style="width: 400px;height: 250px;"></div>
    </div>
</template>

<script>
export default {
    methods: {
        darwbar() {
            let myChat = this.$echarts.init(this.$refs.trend)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    borderWidth: 0,
                    padding: 10,
                    textStyle: {
                        color: '#000'
                    },
                    backgroundColor: '#fff',
                    confine: true // 超出的部分不会被遮盖
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: ['2020', '2021', '2022', '2023']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [2, 21, 40, 23],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            myChat.setOption(option)
        }
    },
    mounted() {
        this.darwbar()
    }
}
</script>

<style lang="scss" scoped></style>